@PULLDOWN_HEIGHT: 50px;
@PULLDOWN_PADDING: 15px;

.dx-scrollable-native {
    &.dx-scrollable-native-generic {
        .dx-scrollview-top-pocket {
            position: absolute;
            display: none;
        }
    }

    &.dx-scrollable-native-android {
         .dx-scrollview-top-pocket {
            width: 40px;
            height: 40px;
            left: 50%;
            position: absolute;
            z-index: 1;
        }

        .dx-scrollview-pull-down {
            background-image: none;
            position: static;
            height: 100%;
            width: 100%;
            left: -50%;
            margin-left: -20px;
            padding: 0;
            .border-radius(50%);

            &.dx-scrollview-pull-down-loading {
                .transition-transform(100ms);
            }

            .dx-scrollview-pull-down-indicator {
                position: relative;
                top: 0;
                padding: 4px;
                margin: 0;
                height: 100%;
                width: 100%;
                float: left;
                .box-sizing(border-box);

                .dx-loadindicator {
                    float: left;
                }
            }
        }

        .dx-icon-pulldown {
            width: 100%;
            height: 100%;
            padding: 8px;
            font-size: 24px;
            .box-sizing(border-box);
            .transition(~"opacity .2s");
        }

        .dx-scrollview-pull-down-loading.dx-scrollview-pull-down {
            .transition(~"top .2s ease-out 0s");
        }

        .dx-scrollview-pull-down-image {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-size: contain;
            .transition(~"opacity .2s ease 0s");
        }

        .dx-scrollview-pull-down-loading .dx-icon-pulldown {
            display: none;
        }
    }

    &.dx-scrollable-native-ios {
        .dx-scrollview-top-pocket {
            position: absolute;
            left: 0;
            width: 100%;
            overflow-y: auto;
            .transition-transform(400ms, ease);
            .transform(~"translate(0px, 0px)");
        }

        .dx-scrollview-content {
            .transition-transform(400ms, ease);
            .transform(~"none");
        }
    }

    &.dx-scrollable-native-win8 {
        &.dx-scrollable-disabled {
            overflow-y: auto;

            .dx-scrollable-container {
                overflow-y: auto;
                overflow-x: hidden;
            }

            .dx-scrollable-content {
                overflow-y: hidden;
            }

            .dx-scrollview-content {
                overflow-y: hidden;
            }
        }

        .dx-scrollable-container {
            -ms-overflow-style: -ms-autohiding-scrollbar;
        }

        .dx-scrollview-bottom-pocket {
            width: 100%;
            text-align: center;
        }
    }
}


.dx-device-android-4 .dx-scrollable-native.dx-scrollable-native-android {
    .dx-scrollview-pull-down-loading .dx-icon-pulldown {
        display: block;
    }
}

.dx-scrollview-content {
    position: static;
    .dx-clearfix;
}

.dx-scrollview-pull-down {
    width: 100%;
    height: @PULLDOWN_HEIGHT;
    padding: @PULLDOWN_PADDING 0;
    top: -(@PULLDOWN_HEIGHT + @PULLDOWN_PADDING*2);
    overflow: hidden;
    .transform(~"translate(0px, 0px)");
    .user-drag(none);
    .box-sizing(content-box);
}

.dx-scrollview-pull-down-container {
    display: inline-block;
    width: 49%;
    text-align: right;
}

.dx-scrollview-pull-down-indicator {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 50%;
    display: inline-block;
    margin: -15px 20px 0 15px;
    width: 20px;
    .user-drag(none);
}

.dx-scrollview-pull-down-image {
    display: inline-block;
    vertical-align: middle;
    margin: 0 20px;
    width: 20px;
    height: 50px;
    background-size: contain;
    .user-drag(none);
    //B231062
    .transform(~"translate(0,0) rotate(0deg)");
    -ms-transform: rotate(0deg);
    .transition-transform(.2s, linear);
}

.dx-scrollview-pull-down-text {
    display: inline;
    vertical-align: middle;
    position: relative;
    overflow: visible;
    .user-drag(none);

    div {
        position: absolute;
        left: 0;
        top: 0;
        white-space: nowrap;
        overflow: visible;
    }
}

.dx-scrollview-pull-down-ready {
    .dx-scrollview-pull-down-image {
        //B231062
        .transform(~"translate(0,0) rotate(-180deg)");
        -ms-transform: rotate(-180deg);
    }
}

.dx-scrollview-pull-down-loading {
    .dx-scrollview-pull-down-image {
        opacity: 0;
    }

    .dx-scrollview-pull-down-indicator {
        opacity: 1;
    }
}

.dx-scrollview-scrollbottom {
    width: 100%;
    padding: 10px 0;
    overflow: hidden;
    text-align: center;
    .transform(~"translate(0,0)");

    &:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
}

.dx-scrollview-scrollbottom-indicator {
    display: inline-block;
    margin: 0 10px 0 0;
    .user-drag(none);
}

.dx-scrollview-scrollbottom-text {
    display: inline-block;
    margin-top: -20px;
    vertical-align: middle;
    .user-drag(none);
}

.dx-scrollview-scrollbottom-end {
    opacity: 0;
}

.dx-rtl .dx-scrollable-native,
.dx-scrollable-native.dx-rtl {
    &.dx-scrollable-native-ios {
        .dx-scrollview-top-pocket {
            left: auto;
            right: 0;
        }
    }
}

.dx-rtl .dx-scrollview-pull-down-container {
    text-align: left;
}

.dx-rtl .dx-scrollview-pull-down-indicator {
    left: auto;
    right: 0;
}

.dx-rtl .dx-scrollview-pull-down-text {
    div {
        left: auto;
        right: 0;
    }
}

.dx-rtl .dx-scrollview-scrollbottom-indicator {
    margin: 0 0 0 10px;
}
